<template>
  <view class="home">
    <view class="search-box">
      <view class="search-input u-flex-y-center">
        <image src="@/static/images/01_1erss.png" mode=""></image>
        <input type="text" class="u-flex-fill" placeholder="请输入关键字搜索" v-model="params.keyword" />
        <view class="search-btn" @click="_houseList"> 确定 </view>
      </view>
    </view>
    <view class="search-history" v-if="!list.length">
      <view class="search-title">搜索记录</view>
      <view class="search-tag" v-for="(item,index) in historyList" :key="index" @click="changeSearch(item)">
        {{item.keyword}}
      </view>
      <u-empty v-if="!historyList.length"></u-empty>
    </view>
    <back-page />
    <view v-for="(item,index) in list" :key="item.id" class="u-p-l-20 u-p-r-20">
      <house-item customStyle="background:#fff" :item="item" :imageWidth="234" imageHeight="192">
        <template #right>
          <view class="u-flex-between u-flex-column u-flex-fill">
            <view class="house-name u-flex-y-center">
              <view class="house-tag" v-if="item.label">{{item.label}}</view>
              <view class="u-line-1 u-flex-1">{{item.title}}</view>
            </view>
            <view class="house-desc">“{{item.description}}”</view>
            <view class="house-info">“{{item.space}}㎡ |{{item.house_type_text}}”</view>
            <view class="house-price u-flex-between u-flex-y-center">
              <text>市场价：{{item.market_price}}万</text>
              <text>优惠价：{{item.price}}万</text>
            </view>
          </view>
        </template>
      </house-item>
    </view>
  </view>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { houseList, user_search } from '../../config/api';
  const params = ref({
    keyword: ''
  })
  const historyList = ref([])
  const list = ref([])
  onMounted(() => {
    _user_search()
  })
  const changeSearch = (item) => {
    params.value.keyword = item.keyword
    uni.$u.route(`/pages/index/houseList/houseList?keyword=${item.keyword}`)
  }
  // 检索记录
  const _user_search = () => {
    user_search().then(res => {
      historyList.value = res.data
    })
  }
  // 房源列表
  const _houseList = () => {
    uni.$u.route(`/pages/index/houseList/houseList?keyword=${params.value.keyword}`)
  }
</script>

<style lang="scss" scoped>
  .home {
    background: #F7F6FA;
    min-height: 100vh;
  }

  .search-box {
    background: #fff;
    position: sticky;
    z-index: 3;
    top: 0;
    padding: 8rpx 20rpx;

    .search-input {
      padding: 0 10rpx 0 24rpx;
      border-radius: 38rpx;
      background: #f8f8f8;
      height: 76rpx;
      font-size: 26rpx;


      image {
        width: 36rpx;
        height: 36rpx;
        margin-right: 20rpx;
      }

      .search-btn {
        width: 100rpx;
        height: 60rpx;
        background: #F87610;
        border-radius: 30rpx;
        line-height: 60rpx;
        text-align: center;
        color: #fff;
        font-size: 26rpx;
      }
    }
  }

  .search-history {
    background: #fff;
    border-radius: 24rpx;
    margin: 20rpx;
    padding: 24rpx;

    .search-title {
      font-size: 28rpx;
      color: #000;
      font-weight: 800;
    }

    .search-tag {
      background: #F4F4F4;
      border-radius: 12rpx;
      padding: 4rpx 28rpx;
      color: #666;
      font-size: 26rpx;
      font-weight: 500;
      margin-right: 24rpx;
      display: inline-block;
      margin-top: 20rpx;
    }
  }

  .house-name {
    font-size: 24rpx;
    color: #333;
    font-weight: 600;

    .house-tag {
      width: 112rpx;
      height: 36rpx;
      background: linear-gradient(180deg, #7E7872 0%, #4E4E4E 100%);
      border-radius: 8rpx;
      text-align: center;
      line-height: 36rpx;
      color: #fff;
      font-size: 20rpx;
      font-weight: 500;
      margin-right: 12rpx;

    }
  }

  .house-info {
    font-size: 24rpx;
    font-weight: 500;
    color: #666;
  }

  .house-desc {
    font-size: 22rpx;
    color: #E47117;
  }

  .house-price {
    color: #DF0F0F;
    font-weight: 800;
    font-size: 24rpx;
  }
</style>